<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		*{margin: 0;padding: 0;}
		video{
			width: 500px;
		}
		.div{
			width: 500px;
			height: 500px;
			margin: 20px auto;
		}
		.ks{
			margin-left: 38%;
			margin-top: 10px;
		}
		.bbo{
			height: 20px;
		}
		.bbo .por-wrap{
			float: left;
			width: 400px;
			height: 20px;
			background: #ccc;
		}
		.bbo .por-wrap .por-gress{
			background: red;
			height: 100%;
			width: 0;
		}
		.bbo p{
			float: right;
			width: 100px;
		}
		.sy{
			clear:both;
			height: 20px;
			margin-top: 5px;
			margin-bottom: 5px;
		}
		.sy span{
			float: left;
			display: block;
			width: 20px;
			height: 20px;
			border:1px solid #000;
			text-align: center;
			margin:0 15px;
		}
		.sy #sp1{
			margin-left: 205px;
		}
		.sy button{
			float: left;
		}
	</style>
	<body>
		<div class="div">
			<video src="video/张全蛋.mp4" controls></video>
			<p class="ks"><img src="img/btnPause.png" alt=""></p>
			<div class="bbo">
				<div class="por-wrap">
					<div class="por-gress">
						
					</div>
				</div>
				<p class="time"><span class="timel">00:00</span> / <span class="timer"></span></p>
			</div>
			<p class="sy"><span id="sp1">-</span><button class="jy">静音</button><span id="sp2">+</span></p>
			<button class="qp">全屏</button>
			
			
		</div>
	</body>
	<script src="jq3.js"></script>
	<script>
		var video=document.querySelector('video')

		video.onloadeddata=function(){
			$('.timer').html(timeFormat(video.duration));
		}
		video.ontimeupdate=function(){
			$('.timel').html(timeFormat(video.currentTime));

			var bfb=video.currentTime/video.duration*100;
			$('.por-gress').width(bfb+'%');
		}
		
		$('.por-wrap').mousedown(function(e){
		    var x = e.pageX - this.offsetLeft,
		         w = $(this).width();
		    video.currentTime = x / w * video.duration;
		    this.a = true;
	    })
	    
	    $('.por-wrap').mousemove(function(e){
		    if(this.a){
			    var x = e.pageX - this.offsetLeft,
			        w = $(this).width();
			    video.currentTime = x / w * video.duration;
			    $('.pro-gress').width( x / w * 100 + '%' );
		    }
	    })
	
	    $('.por-wrap').mouseup(function(e){
	     	this.a = false;
	    })
		
		
		$('.ks').click(function(){
			if(video.paused){
				video.play();
				$(this).html('<img src="img/btnPlay.png" alt="">')
			}else{
				video.pause();
				$(this).html('<img src="img/btnPause.png" alt="">')
			}
		})
		$('.jy').click(function(){
			if(video.muted==true){
				video.muted=false;
				$(this).html('静音')
			}else{
				video.muted=true;
				$(this).html('不静音')
			}
		})
		$('.qp').click(function(){
			video.requestFullscreen();
		})
		
		var vol= $('video').volume;
		$('#sp1').click(function(){
		    console.log( vol)
		    vol =vol>0?(vol*10 -1)/10:0;
		    $('video')[0].volume = vol;
		})
		$('#sp2').click(function(){
		    console.log( vol)
		    vol =vol<1?(vol*10 +1)/10:1;
		    $('video')[0].volume = vol;
		})
		
		function timeFormat(value) {
		    var second = parseInt(value); // 秒
		    var minute = 0;               // 分
		    var hour = 0;                 // 时
		    if(second >= 60) {
			    minute = parseInt(second / 60);
			    second = parseInt(second % 60);
			    if(minute >= 60) {
				    hour = parseInt(minute / 60);
				    minute = parseInt(minute % 60);
			    }
		    }
		    if(second < 10) second = "0" + second;
		    if(minute < 10) minute = "0" + minute;
		
		    var result = minute + ":" + second;
		    if(hour > 0) result = hour + ":" + result;
		    return result;
	    }
	</script>
</html>